<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ParkingLotManagementSystem</title>
    <link rel="shortcut icon" href="./resources/image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./resources/css/public.css">
    <link rel="stylesheet" href="./pages/index/index.css">
    <link rel="stylesheet" href="./resources/css/bootstrap-icons.css">
</head>

<body>
    <div class="totalbg"></div>
    <header>
        <div class="nav-bar">
            <a href="#" class="logo">Parking Lot</a>
            <div class="navigation">
                <div class="nav-items">
                    <a href="#search"><i class="bi bi-search"></i>车位查询</a>
                    <a href="#payfor"><i class="bi bi-paypal"></i>停车缴费</a>
                    <a href="#"><i class="bi bi-alarm"></i>车位预定</a>
                </div>
            </div>
            <div class="user-l-r">
                <a href="./pages/login/login.html" class="login">登录</a>
                <a href="./pages/register/register.html" class="register">注册</a>
            </div>
            <div class="islogin">
                <span>你好，</span><a href="javascript:;">xxx</a>
            </div>
        </div>
    </header>

    <section class="index-body">
        <a href="#search" class="parking-query" id="parking_query"><i class="bi bi-search"></i><span>车位查询</span></a>
        <a href="#payfor" class="reservations" id="parking_payment"><i class="bi bi-paypal"></i><span>停车缴费</span></a>
        <a href="javascript:;" class="parking-payment" id="parking_res"><i class="bi bi-alarm"></i><span>车位预定</span></a>
    </section>

    <section class="go-query" id="search">
        <div class="car-place">
            <h1>可用车位查询<i class="bi bi-arrow-down-right-square-fill"></i></h1>
            <form action="javascript:;" method="get">
                <input type="text" id="designated" placeholder="请输入指定车位号">
                <input type="submit" id="designated_btn" value="查询">
            </form>
            <div>
                <div class="place-btn">
                    <button class="btn-active">A区</button>
                    <button>B区</button>
                    <button>C区</button>
                </div>
                <div class="place-tips">
                    <span>空闲车位<i class="bi bi-circle-fill"></i></span>
                    <span>占用车位<i class="bi bi-circle-fill"></i></span>
                    <span>已预定<i class="bi bi-circle-fill"></i></span>
                    <span>维护中<i class="bi bi-circle-fill"></i></span>
                </div>
            </div>

            <table></table>
        </div>
    </section>

    <section class="go-pay" id="payfor">
        <div class="pay-detail">
            <h1>停车缴费<i class="bi bi-arrow-down-right-square-fill"></i></h1>
            <form action="javascript:;">
                <input type="text" id="pay_tel" placeholder="请输入手机号查询信息">
                <input type="button" id="pay_query" value="查询">
            </form>

            <div class="paydetail-list">

                <table>
                    <tr>
                        <th colspan="2"><img src="./resources/image/usercar.jpeg" alt=""></th>
                    </tr>
                    <tr>
                        <td>停车用户：</td>
                        <td>请查询</td>
                    </tr>
                    <tr>
                        <td>入场时间：</td>
                        <td>请查询</td>
                    </tr>
                    <tr>
                        <td>驶出时间：</td>
                        <td>请查询</td>
                    </tr>
                </table>

                <table>
                    <tr>
                        <td>会员用户：</td>
                        <td class="vipuser"><i class="bi bi-star-fill"></i></td>
                    </tr>
                    <tr>
                        <td>总时长：</td>
                        <td>请查询</td>
                    </tr>
                    <tr>
                        <td>需缴费：</td>
                        <td>请查询<i class="bi bi-currency-yen"></i></td>
                    </tr>
                    <tr>
                        <td colspan="2"><a href="javascript:;">查看收费详情<i class="bi bi-arrow-right-circle-fill"></i></a>
                        </td>
                        <td></td>
                    </tr>
                </table>
                <div id="ChargingStandard">
                    <a href="javascript:;"><i class="bi bi-x-circle"></i></a>
                    <table border="1px" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>收费标准（元/半小时）</th>
                            <th>会员（充值享0.9折）</th>
                            <th>非会员（临时停车）</th>
                        </tr>
                        <tr>
                            <td>30分钟以内</td>
                            <td>免费</td>
                            <td>免费</td>
                        </tr>
                        <tr>
                            <td>30分钟-3小时</td>
                            <td>1.1元/半小时</td>
                            <td class="price1">1.2元/半小时</td>
                        </tr>
                        <tr>
                            <td>3小时-8小时</td>
                            <td>0.9元/半小时</td>
                            <td class="price2">1.0元/半小时</td>
                        </tr>
                        <tr>
                            <td>8小时以上</td>
                            <td>0.7元/半小时</td>
                            <td class="price3">0.8元/半小时</td>
                        </tr>
                        <tr>
                            <td colspan="3">住：超过半小时不足一小时按一小时计</td>
                        </tr>
                    </table>
                </div>

            </div>
            <button class="gotopay">去支付<i class="bi bi-arrow-right"></i></button>
        </div>
    </section>

    <footer>
        <div class="about">
            <p>Make By Acaninchoi</p>
            <i class="bi bi-arrow-right-circle-fill"></i>
            <span>联系我</span>
            <a href="#"><i class="bi bi-envelope"></i></a>
            <a href="#"><i class="bi bi-telephone-inbound"></i></a>
            <a href="#"><i class="bi bi-github"></i></a>
        </div>
    </footer>

    <script src="./node_modules/moment/moment.js"></script>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./resources/js/common.js"></script>
    <script src="./resources/js/Ajax.js"></script>
    <script src="./pages/index/index.js"></script>
</body>

</html>